一、开发环境搭建

下载node
全局安装typescript npm install -g typescript
创建一个ts文件
使用tsc对ts进行编译，在ts文件目录下执行tsc xxx.ts

二、类型声明

声明一个变量a，同时指定它的类型为number

var a:number
a=3
a='zyt'//报错，因为a的类型为number，不能赋值字符串

声明和赋值同时操作可以省略声明类型

var b=true
b=false
console.log(b)

函数的使用，函数的两个参数为数字并且返回值也为数字类型

function sum (a:number,b:number):number{
    return a+b
}
console.log(sum(11,22))

|符表示|左右的类型都可以

var a:string|boolean;

三、ts中的类型

1. any表示的是任意类型

一个变量设置成any后相当于对该变量关闭了TS的类型检测。使用TS时，不建议使用any类型（因为它可以赋值给任意变量）

//显示any
var a:any
a=10
a="zyt"

//隐式any
var a
a=10
a="zyt"

2.unknown表示未知类型的值

var a:unknown
a=10
a="zyt"

实际上就是一个类型安全的any。unknown类型的变量，不能直接赋值给其他变量，那如果需要赋值怎么办，判断类型再赋值。

var a:unknown
a=10
a="zyt"
var b:string
b='zyt2'
//第一种方式
if(typeof a==='string'){
    b=a
}
//第二种方式类型断言
//语法 变量 as 类型
b=a as string
//第三种方式
//语法 <类型>变量
b=<string>e

3. void用来表示空，以函数为例，就表示没有返回值

function fn():void{

}

4. never表示永远不会返回结果

function fu2():never{
    throw new Error('报错了')
}

5.object表示一个对象

var a:object
a={}
a=function(){

}

6.{}更多的是去指定对象中有哪些属性

//语法：{属性名：属性值，属性名：属性值}
//在属性名后面加上?，表示该属性是可选的
var  b:{name:string,age?:number}
b={name:'孙悟空',age:18}

//[propName:string]:any表示任意类型的属性，propName可以随意命名
//用于对后面属性的一个控制
var c:{name:string,[propName:string]:any}
c={name:'猪八戒',age:18,gender:'男'}

7.设置函数结构的类型声明

//语法：（形参：类型，形参：类型...）=>返回值
var d:(a:number,b:number)=>number
d=function(n1:number,n2:number):number{
    return 10
}

8.array类型

//string[]表示字符串数组
var e:string[]
e=['a','b','c']

//number[]表示字符串数组
var f:number[]

var g:Array<number>
g=[1,2,3]

9.元组，元组就是固定长度的数组

// 语法：[类型，类型，类型]
var h:[string,number]
h=['1',2]

10.enum枚举

enum Gender{
    Male=0,
    Female=1
}
var i:{name:string,gender:Gender}
i={
    name:'孙悟空',
    gender:Gender.Male
}
console.log(i.gender===Gender.Male)

11.&表示同时

var j:{name:string}&{age:number}

12.类型的别名

type myType=1|2|3|4|5
var k:myType
var l:myType

四、编译选项

编译选项1

1.tsc app.js每次需要手动转换

2.tsc app.js -w可以监听自动转换，但是每次只能转换一个文件

3.在项目下创建一个tsconfig.json

tsconfig.json配置如下：

{
/*
tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
    1."include" 用来指定ts文件需要被编译
        **表示任意目录   
        *表示任意文件
    2."exclude" 不需要被编译的文件目录
        默认值:["node_modules","bower_components","jspm_packages"]
*/
"include": [
    "./src/**/*"
],
"exclude": [
    "./src/hello/**/*"
]
}
/*
    3.extends继承（不常用）
    示例：
        "extends":"./config/base"
    4.files文件（不常用）
    示例：
        "files":[
            core.ts,
            sys.ts
        ]
*/

编译选项2

{
    "include": [
        "./src/**/*"
    ],
    //compilerOptions编译器的选项
    "compilerOptions": {
        //target 用来指定ts被编译为ES的版本
        "target": "ES3",
        //module指定
        "module": "es2015",
        //lib用来指定项目中要使用的库
        "lib": ["es6","DOM"],//默认情况一般不动它
        "outDir": "./dist",//用来指定编译后文件所在的目录
        /*
            设置outFile后，所有的全局作用域中的代码会合并到同一个文件
            了解一下,后面用打包工具去实现
        */
        "outFile": "./dist/app.js"
    }
}

TS学习笔记