React TypeScript Tutorial ( Setup, Installation, Static Type Checking )
HTML-код
- Опубликовано: 24 авг 2024
- Using Typescript with ReactJS project, Install, Configure and use concepts like Interface, type guards and set default Props. Use inside a class component and a functional component.
Very short and concise way to describe typescript. Provided just the right syntax I was having trouble with. Keep it up!
Many Thanks . Your tutorials are very simple to understand.
Using create-react-app 3.0, on app creation it says react-scripts-ts is deprecated, so the new syntax should be
$ create-react-app --typescript
Thanks for the info
it`s gonna be deprecated soon so now it`s better to use --template typescript
create-react-app [app-name] --template typescript in 2020
after this, we can just follow the tutorials without any issues
thanks
Great introduction, thanks for sharing.
Very good explanation. i like your way to describe it, prepare more video with redux also. Thanks
Typechecking on nested object would be a great help! I always handle this kind of stuff at my work.
I really enjoy your videos. Thanks for the typescript explanations.
Thank you for the tutorial!
Great content delivered directly and succinctly. Thanks. The only issue I am having is with type MyCompProps in MyComp.tsx. Getting "Use interface instead of type literal". Not sure what that means, but apart from that, great stuff.
Same issue here also. The tutorial ended very quickly.
thanks techsit for such an amazing content
thank you, enjoyed the calm explanation
Your videos are pretty succint, thankYou!
excellent
Awesome tutorial.
Thanks
CC translate this as: "Welcome to sexy tutorials!" LOL.
LOL, Should i leave it as it is or fix it. I might leave it as it is. :)
Awesome tutorial... thanks!
Excellent tutor. Thank you so much :)
Thank you, keep on
Thanks a lot.
you give good tutorials, really should be using the new syntax for us newbies.
thanks for watching J. You are you planning to use typescript with react?
I hope so. cant get this damn update inventory function to work with graphql... I may be stuck here forever :)
you can check the network tab to see what post it sending to graphql. maybe :)
Nice video! Thank you!
Thank You!!
thank you Guru
Really helpful tutorial. Now I have a question. How we will use axios with typescript and what will be the project flow. I have a project in which in have to use Axios and Redux with typescript.
How to add static props/values to functional typescript component?
Ex. HomePage.Header = Header;
Hey sir recently i finished watching your react series, and I really learnt a lot. This is awesome My next step should be learning redux but I read that react's new Context api is really good to learn first. So please make a tutorial on that sir! thank you.
I think you can learn redux first . The new context api is still in beta . I am going to release redux videos soon.
Thank you sir. Waiting for your redux series. Please upload soon
Thanks! :)
Thank you
Thanks for watching Srud!
nice
Hello Sir ,thanks a lot for your support
i get my 1st job .
i am working on a react project and i have to validate a form using formic ,and code in tsx,but i got stuck in tsx,please suggest me what i have to read ,or if possible please make a video on that
thank you..
Formic is bit easy to learn but using it with tsx can be confusing. I will make a video on it. thanks for suggesting.
Great! I have one question, what is that mean for if i use symbol in type inference ie: class MyClass extends React.Component ....so wht is here for &, | and comma .... please explain. I am beginner.
Nice
You had declared an interface for the state 'MyClassState' for defining the structure of our state object in MyClass.tsx at 9:50. Can you how will we link that interface with this.state ?
Error "JSX element class does not support attributes because it does not have a 'props' property".
Even though MyClass extends React.Component and MyClassProps defines the properties
Figured it out. My "create-react-app" didn't install everything so I had to run "npm install @types/node @types/react @types/react-dom @types/typescript"
Glad you got it. :)
Is possible to use babel and typescript in same application?
Your text editor seems awesome, would you mind sharing what you are using?
It's vscode editor
Visual Studio Code w/ some Plugins
It says: "Use an interface instead of a type literal" when using the type in MyComp. How do I resolve this?
Did you ever find the resolution to this?
Great! I have one question, the interface of typescript, can replace proptypes?
Yes, that is the objective. You wont have to use proptypes if you are using Typescript.
Yes
Great vid! Are you rly 21? :o (bcs you know so much)
:) Actually I am double that age.
if you will take (4,18): interface name must start with a capitalized I error
open tslint.json
add
"rules": {
"object-literal-sort-keys": false,
"interface-name": false,
"member-access": [true, "no-public"],
"ordered-imports": false
}
:((((
As a general rule, you can just name your interfaces as Isomething (where something is the original name) and the warning won't appear. It seems to simply be a naming convention that they are enforcing now.
Getting below error:
D:/Study/React/react-typescript/src/components/MyClass.tsx
(3,18): interface name must start with a capitalized I
same thing..
I read about "target" in compilerOptions in tsconfig but I didn't understand it? What's that for? Also the "module" keyword in tsconfig
browser doesn't understand typescript it only knows JavaScript so you write in typescript and it gets converted to JavaScript . target is noting but what version of JavaScript you want this to be converted to . ES5, ES6 ?
@@Techsithtube so the target should be es5 and not es6 because browser can better understand es5. Although browser implements almost all the functionality of es6 but in typescript config we should provide es5. Right?
@techsith I'm using awesome-typescript-loader and babel later so the target could be es6 because babel would convert the es6 to es5. I think it is the version in which my code gets converted to after applying typescript loader but the standard documentation didn't clear up things for me. Please tell if I'm wrong/right
Hello Techsith, where can i find more details or purchase course on this project
This course is free. You can watch entire series on react here.
i have E:/wind/cat/src/components/Wind.tsx
(3,18): interface name must start with a capitalized I how its solve
the same issue
try adding ignore rule to tslint like this:
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts",
"coverage/lcov-report/*.js"
]
},
"rules": {
"interface-name":[false]
}
}
The error is not thrown now. But another one appeared: 'Use an interface instead of a type literal'
@@fitwist You can also avoid the "must start with capitalized I but simply naming the interface Isomething. (where something is the original name)
That latter error I also get and I can't seem to find a way around it. I just can't use type guards as shown in this vid.
your tslint is way different... your code is not valid.
When will you do series on Flux/Redux
How do we upload a react app to github?
goto command line in your project directory. and run following commands.
: git init
: git add .
: git commit -m "initial"
then go git hub and create a new project dont add readme . it will give you two commands like this. run them. as well.
:git remote add origin github.com/youruser/yourrepo.git
:git push -u origin master
techsith Oh so it’s the same as Angular! Wow thank you sir. Also do you have a tutorial on setting up backend with node express and mongo?
Guys, anyone knows how to provide source maps support for css/sass with a such sort of setup (without eject)? Thanks in advance if you'll "save my life" with any clue! )
can you provide us with real examples
When you cant even import a module properly I cant really trust the rest of the tut. Either start over or edit the bloody video