Typescript学习笔记

Typescript学习笔记

参考：https://www.tslang.cn/docs/handbook/basic-types.html

准备：

1.IDE:：VSCode

2.安装：首先安装node.js，然后cmd中使用如下命令全局安装。

npm install -g typescript

然后使用tsc -v命令查看安装版本。

快速入门：

1.新建目录，然后cmd进入该目录，执行code .启动vscode。

2.新建ts文件：greeter.ts。

class Student {

fullName: string;

constructor(public firstName, public middleInitial, public lastName) {

this.fullName = firstName + " " + middleInitial + " " + lastName;

}

interface Person {

firstName: string;

lastName: string;

}

function greeter(person : Person) {

return "Hello, " + person.firstName + " " + person.lastName;

}

var user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

3.在VSCode中使用ctr+`打开终端，使用命令：tsc greeter.ts编译ts代码为Javascript代码。

4.新建index.html引用greeter.js。然后在浏览器中打开即可。

<!DOCTYPE html>

<html>

<head>

<titile>Hello Typescript.</titile>

</head>

<body>

</body>

</html>

5.项目根目录添加tsc编译配置。

{

"compilerOptions": {

"target": "es5",

"noImplicitAny": false,

"module": "commonjs",

"removeComments": true,

"sourceMap": true,

"outDir": "js"

"include":[

"./**/*"

"exclude": [

"./**/*.js"

]

}

//target：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。

//noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。

//module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。为了后面与node.js保持一致，我们这里选用commonjs。

//removeComments：编译生成的JavaScript文件是否移除注释。

//sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。

//outDir：编译输出JavaScript文件存放的文件夹。

//include、exclude：编译时需要包含/剔除的文件夹。

6.添加vs项目配置：项目根目录新建.vscode目录，添加task.json如下：

{

// See https://go.microsoft.com/fwlink/?LinkId=733558

// for the documentation about the tasks.json format

"version": "0.1.0",

"command": "tsc",

"isShellCommand": true,

"args": ["-p", "."],

"showOutput": "always",

"problemMatcher": "$tsc"

}

然后使用ctr+shift+b启动编译，可以看见js文件产生到了js目录下。

7.点击F5启动编译，选择环境为Node.js。vscode会提示你创建launch.json，指定启动入口文件的路径如下：

{

"version": "0.2.0",

"configurations": [

{

"type": "node",

"request": "launch",

"name": "Launch Program",

${workspaceRoot}/js/greeter.js

"outFiles": [

"${workspaceRoot}/out/**/*.js"

]

}

]

}

再次点击F5启动编译，在【调试控制台】中查看调试信息。

PS:由于之前选择的是Node.js环境，因此调试到document.body.innerHTML = greeter(user);会报错document找不到，因为document是前台的元素。

1基本类型

//布尔值boolean

let isDone:boolean = false;

//数字number:hex-0x,oct-0o,bin-0b

let decLiteral:number = 6;

//字符串strin

let str:string = "Hello World.";

//数组[]/Array

let list:number[] = [1,3,5];

let list1:Array<number> = [1,3,5];

//元组Tuple：已知元素类型和数量的数组，并非不能修改

let x:[string,number,number];

x = ['a',100,200];

console.log(x[0]);

console.log(x[1]);

console.log(x[2]);

//枚举enum，默认从0开始

enum Color {Red, Blue, Green}

let c:Color = Color.Red;

//Any用于不使用类型检查器进行编译阶段的检查，可以调用任意方法

let notSure:any = true;

notSure = 4;

notSure.ifItExists();

//Object允许赋任意值，但是不能像any那样调用任意方法

let obj:Object = 5;

obj = true;

//obj.ifItExists();

//void没有任何类型，与Any对应，void类型还能赋值为null和undefined

let uu:void = null;

uu = undefined;

//null和undefinde也是类型，而且是任何类型的子类型，可以赋值给任何类型

let nu:number = 4;

nu = null;

nu = undefined;

//never类型表示永远不存在的类型

//类型断言

let sv:any = "I'm string.";

let svl:number = (<string>sv).length;

let svl1:number = (sv as string).length;

未完待续...

猜你喜欢