Original: Taste of Little Sister (wechat official ID: XjjDog), welcome to share, please reserve the source.

It’s so much fun with all the cool stuff on the front. JavaScript, however, is a roadblock, especially when you’re familiar with strong type-checking languages like Java, and feel uncomfortable every time you look at JS. As a backend, writing JavaScript really feels like writing vomit. Fortunately, there are now better options.

Why learn TypeScript? Because its syntax is really similar to Java. With this, you can get rid of annoying JavaScript and embrace the technology stack on the front end.

TypeScriptisJavaScriptA superset of. It means that intsCan be written directlyjs. In my first instinct,jsIt’s like a compiled executable, andtsLike the Java language, or the Scala language. However, this is just an analogy, much of the syntax in TS is actually used at compile time, in the real versionjsA lot of information was erased from the file.

As shown above, the TS file generates regular JS files through the TSC compiler. Next, you can execute the normal JS file using the Node command.

Here is a simple TS code. Is it similar to Java?

class Animal {
    public name;
    protected a;
    private b: string;
    constructor(name) {
        this.name = name;
    }
    sayhi() {
        return `my name is The ${this.name}`; }}class Cat extends Animal {
    constructor(name) {
        super(name)
    }
    sayhi() {
        return "meow " + super.sayhi()
    }
    static iaAnimal(a) {
        return a instanceofAnimal; }}function gen<T extends Animal> (name: T) :void {
    console.log(name.name)
}
Copy the code

Here’s a quick overview of some of the basic syntax, some of which is ES6, of course, but I’ve also lumped it all together.

Type related

Because JS is a weakly typed language with many run-time conversions, it cannot use strong conversions like Java, so typescript can enhance some type checking capabilities through language features at compile time. At run time, most have no such judgment at all, so TS is more of a process tool.

Basic data types and custom types are indispensable to a language. Ts provides a series of keywords as special type codes, but the rest is good. The only thing that interests me a bit is union types, which is a very interesting feature.

  • typeofThe keyword is used to determine whether it is a certain type
  • stringIndicates a string, which, unlike Java, begins with a lowercase letter
  • boolean 和 BooleanThe types are different
  • number0b, 0O, 0x indicates progress.
  • anyIs a universal type, equivalent to Object in Java, all any is equivalent to ordinary JS. So, if you hate TS, you can go all the way to any until morning
  • neverRepresents value types that never exist
  • objectRepresents a non-primitive type, not quite the same as in Java
  • string | numberSomething like this is the union type, and that’s the amazing thing. Only these two types of conversions are allowed, and the methods that can be called take the intersection of the two
  • Strings between can be modelled using shell-like syntaxThe ${}
  • readonlyThis turns out to be a keyword, indicating a read-only property
  • [propName: string]: any;This line of code is worth exploring, but not recommended
  • number[]Arrays are similar to Java, except that they are declared after the declaration. Values are declared using [] instead of {}.
  • functionFunctions are no different from javascript in that they can be declared in two ways. Lambda is definitely a strength for JS
  • = >The syntax of ES6 is also disgusting, and combined with ES6 you can write a whole article
  • . restWatch this thing! Similar to the meaning of the Java variable parameter
  • asIs a keyword that we can understand as Javacast, but it is just a syntax check that the runtime has no control over.(window as any)Cool, but error-prone

Statement related to

  • letUsed to declare ordinary variables, small scope, {}
  • varLarge scope, function level or global
  • constRead-only variable, which is static; Readonly is dynamic, but cannot be changed after it is declared
  • declare varDeclare global variables (.d.tsSuffixed files, this is a convention)
  • declare functionDeclare global methods
  • declare classGlobal class
  • declare enumGlobal enumeration type
  • declare namespaceGlobal namespace
  • exportThis is primarily for NPM and can be imported later using import

What is declare? This is similar to the __init__.py file in Python, which exposes interfaces and functions and provides basic data for code auto-completion.

Two default conventions. After configuring tsconfig.json, you can directly compile the TSC command. /// three slash command, very ugly.

About the Class

For those of you coming from Java, you’ll notice that these concepts are similar to Java, but the syntax of TS is much simpler.

  • get setTurns out to be the keyword, can be directly followed by the function. You can change the assignment and read behavior of a property!
  • static,instanceof,public,protected,privateThese are all there, really feel like writing Java is no different
  • constructorThe default is a constructor, unlike Java’s class nouns
  • abstractThere’s also, which means that subclasses have to be implemented, okay
  • As for the difference between classes and interfaces, I think those familiar with Java are transparent to TS
  • In Java, the syntax is also very weird, because you don’t know what to do<>Put it somewhere. In TS, it’s just as bad. Specific how to be familiar with, honed only in practice

About type, interface, class

  • interfaceDefines the interface, here the interface is interesting, can declare the entity, but must assign all values. You can do this by prefixing the member variable?A way to show that it is not necessary, but ugly;?You can also define optional arguments to the function, 6 is very high
  • typeLike interface, it is erased at compile time. The syntax is slightly different, and type can define more types, such as primitive types, union types, tuples, and so on
  • classYou can implement methods in it, which is a bit Java, so it won’t be erased by the compiler. Javascript uses constructors to simulate classes.

The development tools

TSC is the typescript compiler. If compilation errors occur, you can specify the underlying syntax features.

tsc --target es6
Copy the code

It is recommended that the configuration be in the tsconfig.json file, which will be automatically identified.

{
    "compilerOptions": {
        "module": "commonjs"."outDir": "lib"."declaration": true."target":"es6"}}Copy the code

Vscode, through the. D. ts file, can do automatic completion and syntax check. However, for complex personalized configuration, intelligent prompt and configuration similar to IDEA cannot be achieved.

As a consequence, one must have a reference document at hand and be familiar with its contents and functions. When you encounter configuration parameters, you have to scroll to the appropriate place and copy them. This is too painful for a Javaer.

Xjjdog is a public account that doesn’t allow programmers to get sidetracked. Focus on infrastructure and Linux. Ten years architecture, ten billion daily flow, and you discuss the world of high concurrency, give you a different taste.