TypeScript 基础语法入门（上）

TypeScript 定义

采用静态类型的机制，会转换为JavaScript才能在浏览器运行。

TypeScript 带来了什么优势

1. 开发过程中，发现潜在问题
2. 更友好的编辑器自动提示
3. 代码语义更清晰易懂

TypeScript配置环境

安装插件

、

全局安装TypeScript

运行ts文件

直接运行，需要安装ts-node

基础类型和对象类型

// 基础类型 null，undefined，symbol，boolean，void
const count: number = 123;
const teacherName: string = 'Dell';
// 对象类型
class Person {}
const teacher: {
  name:string,
  age:number
} = {
  name: 'Dell',
  age:18
}
// 数组对象 
const numbers: number[] = [1,2,3]
const dell: Person = new Person();
const getTotal:()=> number = () => {
  return 123
}

类型注解和类型推断

type annotation类型注解，我们来告诉TS变量是什么类型

type inference 类型推断，TS会自动的去尝试分析变量的类型

如果 TS 能够自动分析变量类型，我们就什么也不需要做了

如果 TS 无法分析变量类型的话，我们就需要使用类型注解

// type annotation类型注解，我们来告诉TS变量是什么类型
// type inference 类型推断，TS会自动的去尝试分析变量的类型
// 如果 TS 能够自动分析变量类型，我们就什么也不需要做了
// 如果 TS 无法分析变量类型的话，我们就需要使用类型注解
let count:number;
count = 123;
let num = 123;
const firstName = 1;
const secondNumber = 2;
const total = firstName + secondNumber;
function getTotal(firstName:number,secondNumber:number){
  return firstName + secondNumber
}
const total1 = getTotal(1,2)
const obj = {
  name:'dell',
  age:18
}

类型注解

类型推断

函数相关类型

函数类型

// 函数返回值是number
function getTotal(firstName: number, secondNumber: number): number {
  return firstName + secondNumber;
}
const total1 = getTotal(1, 2);
// 函数返回值是空
function sayHello(): void {
  console.log("hello");
}
// 函数永远无法执行全部代码
function errorEmitter(): never {
  throw new Error();
  console.log(123);
}
function errorEmitter2(): never {
  while (true) {}
  console.log(123);
}

解构赋值

// 解构赋值
function getTotal({
  firstName,
  secondNumber,
}: {
  firstName: number;
  secondNumber: number;
}): number {
  return firstName + secondNumber;
}
function getNumber({ first }: { first: number }): number {
  return first;
}
const total = getTotal({ firstName: 1, secondNumber: 2 });
const count = getNumber({ first: 1 })

函数的多种写法

// 注意这里的：number可以省略，因为函数的返回值可以自动类型推断
const func = (str: string): number => {
  return parseInt(str, 10);
};
const func1: (str: string) => number = (str) => {
  return parseInt(str, 10);
};

其他case，有些内置函数不能使用类型推断

const date = new Date(); // Date类型
interface Person {
  name: "string";
}
const rawDate = '{"name" : "dell"}';
const newDate0 = JSON.parse(rawDate);
const newDate: Person = JSON.parse(rawDate);

多种类型

let temp : number | string = 123
temp = 'abc'

数组和元组

数组

// 数组
const arr: (number | string)[] = [1, "2", 3];
const stringArr: string[] = ["a", "b", "c"];
const undefinedArr: undefined[] = [undefined];
// type alias 类型别名
type User = { name: string; age: number };
class Teacher {
  name: string;
  age: number;
}
const objectArr: Teacher[] = [
  new Teacher(),
  {
    name: "dell",
    age: 28,
  },
];
const objectArr1: User[] = [
  {
    name: "obj",
    age: 19,
  },
];

元组

// 元组 tuple
const teacherInfo: [string, string, number] = ["Dell", "male", 18];
// csv
const teacherList: [string, string, number][] = [
  ["dell", "male", 19],
  ["x", "y", 1],
];

interface

interface Person {
  name: string;
}
type User = string;
const getPersonName = (person: Person) => {
  console.log(person.name);
};
const getPersonName1 = (person: Person, name: string) => {
  person.name = name;
};

注意：

在可以使用interface时尽量使用interface

类型别名可以直接赋值一个类型，interface必须是一个对象。

TypeScript 基础语法入门（下）https://developer.aliyun.com/article/1392244