学前准备
安装
使用Node.js
安装:npm install typescript -g
使用IDE:VsCode
下载地址:Visual Studio Code - Code Editing. Redefined
安装扩展:TypeScript Extension Pack
编译调试ts文件
TS文件编译为JS文件,TS文件并不能直接在Web中运行
例如:hello.ts
文件在执行完tsc hello.ts
后得到
实时监控TS文件编译为JS文件:
tsc 文件名 -w
- 使用
html
中引入js文件在浏览器控制台中得到输出
<script src="./hello.js"></script>
创建文件树
dist
文件夹用来输出src
中源代码编译文件src
文件夹用来存放原代码- 根目录下的
tsconfig.json
用来设置ts
文件的配置
tsconfig.json
内容:
{
// ** 表示任意目录 * 表示任意文件
"include": ["./src/**/*"],
// 不需要编译的选项
"exclude": [],
// 编译器可选选项
"compilerOptions": {
// 设置编译ts被编译为ES6版本, 默认为ES3
"target": "ES6",
// module模块化使用的版本
"module": "ES6",
// outDir 指定编译后文件所在目录
"outDir": "./dist",
// outFile 将代码合并为一个文件 (如需使用,module需要设置为system或amd)
// "outFile": "./dist/index.js"
// 是否对JS文件进行编译
"allowJs": true,
// 是否检查js代码是否符合规范
"checkJs": false,
// 是否移除注释
"removeComments": true,
// 不生成编译后文件
"noEmit": false,
// 当有错误时不生成编译文件
"noEmitOnError": true,
// 将编译后的文件为严格模式
"alwaysStrict": true,
// 是否严格检查
"strict": true
}
}
TypeScript基础语法
TypeScript
是JavaScript
的超集,所以TypeScript
可以兼容JavaScript
的数据类型
变量
基本类型
类型 | 例子 | 描述 |
---|---|---|
number | 1, -33, 2.5 | 任意数字 |
string | ‘hi’, “hi”, `hi` | 任意字符串 |
boolean | true、false | 布尔值true 或false |
any | * | 任意类型 |
unknown | * | 类型安全的any |
void | 空值(undefined ) | 没有值(或undefined ) |
never | 没有值 | 不能是任何值 |
object | {name:'孙悟空'} | 任意的JS 对象 |
array | [1,2,3] | 任意JS 数组 |
tuple | [4,5] | 元素,TS 新增类型,固定长度数组 |
enum | enum{A, B} | 枚举,TS 中新增类型 |
类型声明
声明变量类型
let a: number;
let b: number = 10;
let c: string = 'string';
声明函数类型
// 都不指定->js写法 (严格模式下会报错->隐式使用any类型)
function add(a, b) {
return a + b;
}
// 只指定参数类型
function add(a: number, b: number) {
// 返回数值类型
return a + b;
// 也返回字符串 return "a" + "b"; 结果为"ab"
}
// 指定参数与返回值类型
function add(a: number, b: number): number {
return a + b;
}
格式化字符串
- 字符串中填入数值:
let name: string = 'yxc', age: number = 18;
let s: string = `My name is ${name}, I'm ${age / 2} years old.`;
- 定义多行字符串:
let s: string =
`<div>
<h2>标题</h2>
<p>段落</p>
/div>`
- 保留两位小数如何输出
let x: number = 1.234567;
let s: string = `${x.toFixed(2)}`;
let与const
用来声明变量,作用范围为当前作用域。
let
用来定义变量;const
用来定义常量;
例如:
let s = "Hello World", x = 5;
console.log(s + " " + x);
// Hello World 5
let d = {
name: "xiao ming",
age: 18,
}
console.log(d);
// { name: 'xiao ming', age: 18 }
const n = 100;
console.log(n);
// 100
类型断言
-
有些情况下,变量的类型对于我们来说是很明确,但是TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,断言有两种形式:
-
第一种
let someValue: unknown = "this is a string"; let strLength: number = (someValue as string).length;
-
第二种
let someValue: unknown = "this is a string"; let strLength: number = (<string>someValue).length;
-