TypeScript Basics
This is a brief reading note for TypeScript official handbook.
Gulp Setup
Gulp
can be used with TypeScript to provide powerful compiling process. See here for a detailed description.
My new project requires Typescript, Jade and SASS. Here is a sample gulpfile.js
:
var gulp = require("gulp"); var ts = require("gulp-typescript"); var tsProject = ts.createProject("tsconfig.json"); var jade = require("gulp-jade"); var sass = require("gulp-sass"); gulp.task("sass",function() { return gulp.src('src/styles/*.scss') .pipe(sass().on('error',sass.logError)) .pipe(gulp.dest('dist/styles')); }) gulp.task("typescript", function () { return tsProject.src('src/scripts/*.ts') .pipe(ts(tsProject)) .pipe(gulp.dest("dist/scripts")); }); gulp.task("jade",function() { return gulp.src('src/templates/*.jade') .pipe(jade()) .pipe(gulp.dest("./dist")); }) gulp.task('default',['sass','typescript','jade']);
And the tsconfile.json
, just for future reference:
{ "files": [ "src/scripts/main.ts", "src/scripts/test.ts" ], "compilerOptions": { "noImplicitAny": true, "target": "es5" } }
Types and Variables
Number
Integer, Floating Point, Hexadecimal and Decimal Literals can all be declared as number
type.
let decimal: number = 6; //declare a variable called 'decimal', with value equaling to 6
String
Template Strings
can be used to span multiple lines and have embedded expressions. Also +
can be used to concatenate strings with variables.
Remember to use lower case string
.
Example:
//Using `` to provide break line effect let fullName: string = `Bob`; let age: number = 37; let sentence: string = `Hello, my name is ${fullName}. I'll be ${age+1} years old next month.` let sentence: string = "Hello, my name is " + fullName + ".\n\n" + "I'll be " + (age+1) + " years old next month."
Above code generates following js code. Notice the result of \n\n
:
var fullName = "Bob"; var age = 37; var sentence = "Hello, my name is " + fullName + ".\n\nI'll be " + (age + 1) + " years old next month."; var sentence2 = "Hello, my name is " + fullName + ".\n\n" + "I'll be " + (age + 1) + " years old next month.";
Array & Tuple
To create an array, just use []
to construct array, or use Array<elemType>
to do so: let list: number[] = [1,2,3]
To create a tuple (mixed type of variables), declare it first, then insert element to it:
let x: [string, number]; x = ['hello', 10]; //type must match x[1] = 3; //OK to insert element to each position
Enum
In Java, Enum
is a special data type that enables for a variable to be a set of predefined constants. The variable must be equal to one of the values that have been predefined for it. Java example is below:
public enum Day{ SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY }
Similarly in typescript, an enum is defined by a group of constants (number, string, key-value pair, etc) using enum {}
. User can create an instance with one constant from an enum constructor.
enum begin numbering elements starting from 0
, It's ok to manually set corresponding number
Example:
enum Color{Read, Green, Blue}; let c: Color = Color.Green; alert(c);
Code above will generate following JS code:
var Color; (function (Color) { Color[Color["Read"] = 0] = "Read"; Color[Color["Green"] = 1] = "Green"; Color[Color["Blue"] = 2] = "Blue"; })(Color || (Color = {})); ; var c = Color.Green; alert(c);
Example with Assigned Index:
enum Color{Read=2, Green=8, Blue=10}; let c: Color = Color.Green; let cname: string = Color[1] alert(c); alert(cname)
Code above will generate:
var Color; (function (Color) { Color[Color["Read"] = 2] = "Read"; Color[Color["Green"] = 8] = "Green"; Color[Color["Blue"] = 10] = "Blue"; })(Color || (Color = {})); ; var c = Color.Green; var cname = Color[1]; alert(c); alert(cname);
Any & Void
Any
is used to describe the variables with unknown type, like data from user or 3rd party. Use any
to let variable passing compiler's type-checking:
let notSure: any = 4; let notSure2: any = [2, 'test', false] //Following two methods can pass compiler but will getting error in running time, if methods actually do not exist notSure.ifItExists(); notSure.toFixed(); notSure2.isItExists(); alert(notSure2); let Sure: Object = 4; Sure.toFixed();
In code above, first part of code can work without error reported from compiler. That's because any
can pass any type-checking from compiler. However, second part of code will get compiler error error TS2339: Property 'toFixed' does not exist on type 'Object'
(And you can see error reported in VSCode if you use it). That's because Object
only allow you to assign any value to variable, but you can't call method on them, even though variable has that method.
Void
is similar as the one in Java: if a function has void
keyword, this function will not return anything. You can only assign null
or undefined
to void
variable, otherwise you will get compiler error:
/* If you don't user null or undefined, you will get following error in compiler: error TS2322: Type 'number' is not assignable to type 'void'. */ let unusable: void = null; function voidtest(): void{ alert('this is a void test'); }
Type Assertion
Similar as cast
in other languages, type assertion can be used to pass compiler's type checking. It should be used when certain type checking has been down and there is a guarantee of correct type.
<type>variable
and variable as type
can all be used to do type assertion. JSX
only use variable as type
style:
let typeassertion: string = "test type assertion string"; let strlength: number = (<string>typeassertion).length; let strlength2: number = (typeassertion as string).length; console.log(strlength); console.log(strlength2);