https://24kcs.github.io/vue3_study/chapter1/04_webpack%E6%89%93%E5%8C%85.html#build-webpack-config-js

https://www.tslang.cn/docs/handbook/react-&-webpack.html

安装

  1. //全局安装
  2. npm install -g typescript
  4. //查看版本
  5. tsc-V

使用

编译代码

  1. tsc xxx.ts  //将ts文件转换为js文件

类型注解

  1. function greeter(person: string){
  2.     return 'Hello' + person
  3. }
  5. let user = "chu"
  6. document.body.innerHTML = greeter(user)

这个例子中，我们期望greeter函数接收一个字符串参数. 当我们传入一个数组，就会报错

类型“number[]”的参数不能赋给类型“string”的参数。ts(2345)

接口

  1. interface Person {
  2.     firstName : string;
  3.     lastName : string
  4. }
  6. function greeter(person: Person){
  7.     return "hello" + person.firstName + person.lastName
  8. }
  9. let user = {firstName:'chu',lastName:'1'}
  10. console.log(greeter(user))

类

注意：在构造函数的参数上使用 public 等同于创建了同名的成员变量

  1. class Student {
  2.   fullName: string;
  3.   constructor(public firstName, public middleInitial, public lastName) {
  4.     this.fullName = firstName + middleInitial + lastName;
  5.   }
  6. }
  7. interface Person {
  8.   firstName: string;
  9.   lastName: string;
  10. }
  11. function greeter(person: Person) {
  12.   return "hello" + person.firstName + person.lastName;
  13. }
  14. let user = new Student("Jane", "M", "User");
  15. console.log(greeter(user));

vscode中使用

在 webpack 中使用
注意：需要安装版本，版本不一致可能会导致错误

  1. webpack@4.41.5 webpack-cli@3.3.10 webpack-dev-server@3.10.2
  1. ts-loader : 8.0.11

报错
image.png
指定 html-webpack-plugin 的版本为4.5.0