1、第一个TypeScript Demo
-
新建一个文件
demo1.ts -
编写一个方法并执行：
function say() { let web = "Hello World" console.log(web) } say() -
在命令行编译并执行该文件：
tsc demo1.ts// 将 ts文件编译成js文件node demo1.js// 执行 js文件 命令行输出 "Hello World"
- 安装
ts-node提高效率 每次运行ts文件都要先编译后执行，比较麻烦，所以可以安装ts-node提高效率：
npm install ts-node -g// 全局安装 ts-nodets-node demo1.ts// 编译执行 ts文件 命令行输出 "Hello World"
2、TypeScript静态类型
静态类型是TypeScript的一个主要特点，一旦定义好一个变量的静态类型，不能再改变了
let count: number = 1; // 定义count 是个 number 类型的静态类型。不能变更为其他类型
count.toFixed(); // count 确定为 number 类型之后，会具备 number 类型的属性和方法
// count = "hello"; // 赋值其他类型会报错
interface XiaoJieJie { // 还可以通过interface（接口）来自定义静态类型
name: string,
age: number
}
let xiaohong: XiaoJieJie = { // 声明的变量必须符合自定义类型，不然会报错
name: "小红",
age: 18
}
如果使用了静态类型，不仅意味着变量的类型不可以改变，还意味着类型的属性和方法也跟着确定了。这个特点就大大提高了程序的健壮性，并且编辑器这时候也会给你很好的语法提示，加快了你的开发效率。
3、TypeScript的基础静态类型和对象静态类型
- 基础静态类型
声明静态类型的方式很简单，在变量后面加
：然后加上对应类型即可
let num: number = 10086;
let myName: string = "cgw";
常见的基础静态类型有：number、string、null、undefined、boolean、symbol、void等
2. 对象静态类型
const person: { // 对象类型
name: string, // 类型
age: number
} = {
name: "小红", // 值
age: 18
}
console.log(person)
const persons: string[] = ["小红", "小兰", "小青"]; // 字符串数组类型
class Person{}
const dj: Person = new Person(); // 类 类型
const see: () => string = () => "see"; // 函数 类型
4、TypeScript的类型注解和类型推断
- 类型注解 TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。可以为变量、函数参数、函数返回值等添加类型注解。
let num1: number = 12; // 该变量为number类型
let num2: number = 20;
function sum(a: number, b: number): number{ // 该函数接收两个number类型的参数，返回一个number类型的值
return a + b;
}
console.log(sum(num1, num2));
- 类型推断
当未给变量添加类型注解时，TypeScript会自动的去尝试分析变量的类型。
例如下面这行代码，虽然未给变量添加类型注解，但当鼠标放上去时，ts自动将其添加为number类型。
5、TypeScript的数组类型定义
- 简单数组类型
let numArr: number[] = [1, 2, 3, 4]; // number数组
let strArr: string[] = ['a', 'b', 'c']; // string数组
- 复合数组类型 当一个数组有多种数据类型时:
let arr: (number | string)[] = ['a', 'b', 1, 4, 'c']; // 既有number类型，又有string类型的数组
let arr2: any[] = ['a', 1, null, undefined, {a: 1}]; // 任意类型的数组
- 对象数组类型 当一个数组每一项都为一个对象时：
let xjjArr: { name: string, age: number }[] = [
{ name: "小红", age: 18 },
{ name: "小兰", age: 20 },
];
这样定义比较麻烦，可以使用类型别名来简化：
type Lady = { name: string, age: number }; // 用type来定义类型别名
let xjjArr: Lady[] = [
{ name: "小红", age: 18 },
{ name: "小兰", age: 20 },
];
- 类 数组类型
class Lady {
name: string;
age: number;
}
let xjjArr: Lady[] = [
{ name: "小红", age: 18 },
{ name: "小兰", age: 20 },
];
6、TypeScript的函数参数和返回类型定义
- 无返回值
如果一个函数没有返回值的话，我们可以给它加
void类型注解，表示没有任何返回值。
function say(): void{ // 该函数没有返回值
console.log("hello world");
}
- 简单类型 我们可以给函数参数及返回值加上类型注释，提高程序的健壮性。
function sum(a: number, b: number): number{ // 该函数接收两个number类型的参数，返回一个number类型的值
return a + b;
}
3.参数为对象解构时 当参数为对象解构时，写法会稍微麻烦一些。
function sum({num1, num2}: {num1: number, num2: number}): number{
return num1 + num2;
}
console.log(sum({num1: 123, num2: 456}));
