What you Need to know about TypeScript

Write above: This ts series consists of 4 articles, from getting started to “getting buried”, and this article is only used as study notes.

For any language: must be “with the specified syntax, to express specific semantics, the final operation run time” a process; That is, language = grammar + semantics + runtime

In this paper, the content

• javascript or TypeScript
• Type annotations
• type or interface

Read the article in about 10 minutes.

JavaScript or TypeScript

JavaScript

JavaScript is known to be a weak language with lax type specifications. As far as I know, the father of JS didn’t take long to develop the language.

An 🌰

var a = 123;

a = [1.2.3]
a = '123'
Copy the code

This makes A seem generic, but increases the unpredictability of the project.

TypeScript

TypeScript is a superset of the JavaScript language. It adds optional type annotations to JavaScript, greatly increasing the readability and maintainability of code. At the same time, it provides the latest and ever-evolving JavaScript features that allow us to build more robust components.

TypeScript has three main features:

• It starts with JavaScript and ends with JavaScript

TypeScript compiles clean, concise JavaScript code that runs in any browser, node.js environment, and any JavaScript engine that supports ECMAScript.

• Powerful tools for building large applications

Types allow JavaScript developers to use efficient development tools and common operations such as static checking and code refactoring when developing JavaScript applications.

Types are optional, and type inference lets you comment on some types to make a big difference in your code’s static validation. Types let you define interfaces between software components and gain insight into the behavior of existing JavaScript libraries.

• Advanced JavaScript

TypeScript provides the latest and evolving JavaScript features.

Type annotations

Static type annotation

Once defined, it cannot be changed.

An 🌰

// Count is a variable of type number, where: number defines a static type. The count variable is always a number in the program and cannot be changed
const count: number = 1;
count = "changeNumber"; / / an error

// The type annotation of the function argument, strictly judging the type of the received argument
function greeter (person: string) {
  return 'Hello, ' + person
}

let user = 'Yee'

// If it is not a string, an error will be reported
console.log(greeter(user))

// Function arguments are objects (destruct)
// More than one parameter
function add({ one, two }: { one: number, two: number }) :number {
  return one + two;
}
Copy the code

Static type checker

When writing code, it will indicate whether the type, syntax, and so on is wrong.

An 🌰

/ / type
console.log(4 / []);

// The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

/ / grammar
let a = (4

// ')' expected.
Copy the code

tuples

Tuples are similar to arrays, but they are annotated differently to fix the position of each element type in the array. This is called a tuple.

// The uniform type annotation prevents us from properly limiting each value in the array
const man: (string | number) [] = ["The Outlaw John.".28."gunner"];

// Tuples specify each worth type in the array
const man: [string.string.number] = ["The Mighty Sword of The Wind"."swordman".28];
Copy the code

The joint type

By associated types, it is possible to think of a variable as having two or more types. The key symbol is |.

An 🌰

// To name a dog, for example, you can call it rhubarb or 123
let dogName : string | number = 'rhubarb'/123

// Return type is inferred as string | number
function changeDogName(name: string | number) {
  dogName = name
  return dogName;
}
Copy the code

type or interface

• Type is a type alias
• Interface is the interface

Type Type alias usage

An 🌰

// defines a type alias for Man
type Man = { name: string.age: Number };

const man: Man[] = [
  { name: "The Outlaw John.".age: 28 },
  { name: "The Mighty Sword of The Wind".age: 28},];Copy the code

Interface Interface usage

An 🌰

interface Man {
  name: string;
  age: number; weapon ? :string; // Weapons are optional
}

const getName = (man: Man) = > {
  console.log(man.name + "The age is:" + man.age);
};

const man = {
  name: "Outlaw.".age: 28.weapon: "Gun"}; getName(man);Copy the code

The difference between

Type aliases can work like interfaces, but with some subtle differences. – ts official

interface X {
    a: number
    b: string
}

type X = {
    a: number
    b: string
};
Copy the code

• Interfaces can be inherited but type aliases cannot be

  interface Animal{ name : string };
  interface Bear extends Animal{ honey : boolean };
  
  type Animal = { name = string };
  type Bear = Animal & { honey : boolean };
  Copy the code

• Interfaces can be merged automatically, but type aliases cannot

  // Merge interfaces with the same name
  interface Window{ title : string };
  interface Window{ name : string };
  
  // type repeated definition error
  type Window{ title : string };
  type Window{ name : string };
  Copy the code

• Type aliases can define types directly, and interfaces must be objects.

  // The essence of the type operation is the type alias. Alias the basic type number to Second,
  // The interface is of type Second and number
  // The ability to define basic data types, since interfaces are essentially type-independent
  type Second = number;
  let time: Second = 10
  
  // The interface does not have to select values, and can add any values and methods in the interface
  interface Girl {
    name: string;
    age: number;
    bust: number; waistline? :number; // Add one? The sign represents the optional value
    [propname: string] :any; // The name of the attribute is a string, and the value of the attribute can be any type
    say(): string; // The return value is string
  }
  
  / / such as
  const girl = {
    name: "123".age: 18.bust: 94.waistline: 21.say() {
      return "123"; }};Copy the code

conclusion

This article mainly describes the differences between JS and TS, the common TS syntax and the similarities and differences between type and interface. I recently joined a TS learning group created by the author of Mini-Vue to study together. If you’re interested, get you in the group. There will also be a variety of forms of gambling learning!