TypeScript 快速上手

更新时间: 2025/5/19 | 总字数: 0 字 | 阅读时长: 0 分钟

概述

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码 开源于 GitHub 上。

安装 TypeScript

在 PowerShell 命令行窗口，运行如下命令，全局安装 TypeScript。

npm

npm install -g typescript

yarn

yarn global add typescript

pnpm

pnpm add -g typescript

安装完成后，执行如下命令，检查是否安装成功。

tsc -V

编写 TypeScript 程序

hello.ts

(()=>{
    // str 这个参数是 String 类型的
    function sayHi(str){
        return '你好啊' + str
    }
    let text = '测试'
    console.log(sayHi(text))
})();

手动编译

tsc hello.ts

配置自动编译

生成配置文件

tsc --init

修改配置文件

tsconfig.json

"outDir":"./js", // 编译后 js 文件存放位置
"strict":false, // 关闭严格模式

类型注解

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

function greeter (person: string) {
  return 'Hello, ' + person
}
let user = 'Yee'
console.log(greeter(user))

接口

在 TypeScript 里，只在两个类型内部的结构兼容，那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements 语句。

// 定义接口
interface Person {
  firstName: string
  lastName: string
}

// 定义方法
function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = {
  firstName: 'Yee',
  lastName: 'Huang'
}

console.log(greeter(user))

类

// 定义类
class User {
  fullName: string
  firstName: string
  lastName: string
	
   // 定义构造函数
  constructor (firstName: string, lastName: string) {
    this.firstName = firstName
    this.lastName = lastName
    this.fullName = firstName + ' ' + lastName
  }
}

// 定义接口
interface Person {
  firstName: string
  lastName: string
}

// 定义方法
function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

// 实例化对象
let user = new User('Yee', 'Huang')

console.log(greeter(user))

使用 Vite 打包 TypeScript

安装依赖

npm

npm i -D vue-tsc
npm i -D typescript

yarn

yarn add -D vue-tsc
yarn add -D typescript

pnpm

pnpm add -D vue-tsc
yarn add -D typescript

配置打包命令

package.json

"build": "vue-tsc --noEmit && vite build"

运行打包命令

npm

npm run build

yarn

yarn build

pnpm

pnpm run build